<template>
    <!--账号设置-->
    <el-form :rules="rules" v-bind="getFormProps({labelWidth:'0'})" ref="form">
        <el-form-item :class="['relative',{'is-error':(check_account && usernameRight) || (!usernameRight && form.username)}]" prop="username"
           :rules="[{required: true, message: '账号不能为空'},validator.rule.account]">
            <el-input class="full-width" placeholder="请输入手机号/邮箱" v-model="form.username" @change="ckeckAccount" v-focus>
                <template slot="prepend"><i class="iconfont">&#xe605;</i></template>
            </el-input>
            <div class="el-form-item__error" v-show="check_account && usernameRight">账号已存在,请直接登录</div>
        </el-form-item>
        <el-form-item :class="['relative',{'is-error':!checkImg && form.imgCode}]" prop="imgCode">
            <el-row>
                <el-col :span="14">
                    <el-input placeholder="请输入图片验证码" v-model="form.imgCode" :maxlength="4" @change="checkCode">
                        <template slot="prepend"><i class="iconfont">&#xe676;</i></template>
                    </el-input>
                    <div class="el-form-item__error" v-show="!checkImg && form.imgCode">图片验证码错误，请重新输入</div>
                </el-col>
                <el-col :span="10" class="rdm-code">
                    <img-code :codetype="2" v-model="form.codeKey" :key="form.key"></img-code>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item :class="['relative',{'is-error':resultCode === '6' && form.verifyCode}]" prop="verifyCode">
            <el-row>
                <el-col :span="14">
                    <el-input placeholder="请输入验证码" v-model="form.verifyCode" :maxlength="6">
                        <template slot="prepend"><i class="iconfont">&#xe600;</i></template>
                    </el-input>
                    <div class="el-form-item__error" v-show="resultCode === '6' && form.verifyCode">验证码错误，请重新输入</div>
                </el-col>
                <el-col :span="10" class="rdm-code">
                    <el-button style="width:125px;padding:10px 8px;" :disabled="true" v-if="check_account || !checkImg">获取验证码</el-button>
                    <SendVerifyCode :username="form.username" :type="1" @disabled="sent=true" @enabled="sent=false" :disabled="true" v-if="!check_account && checkImg"></SendVerifyCode>
                </el-col>
            </el-row>
        </el-form-item>
        <p v-show="sent" class="tips relative">验证码已发送，15分钟内输入有效。<i class="icon icon-warn ab" style="right:83px;"></i></p>
        <el-button class="full-width next-step" type="primary" size="large" native-type="submit" :disabled="!agree" :loading="loading">下一步
        </el-button>
        <p class="agreement">
            <el-checkbox v-model="agree" class="cbx">我同意并遵守</el-checkbox>《<a class="link" @click="dialogVisible = true">求苗用户注册协议</a>》
        </p>
        <div class="have-accout">
            <p>已有账号，
                <router-link :to="'/login'"><a class="link">立即登录</a></router-link>
            </p>
        </div>
        <!--用户注册协议-->
        <el-dialog
          title="信息"
          :visible.sync="dialogVisible"
          size="small" custom-class="signup_box">
          <div class="agree_box">
            <h2 class="tc">用户注册协议</h2>
            <h3>一、总则</h3>
            <p>1.1求苗的所有权和运营权归深圳华体星空体育文化有限公司所有。&nbsp;</p>
            <p>1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与求苗之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。&nbsp;</p>
            <p>1.3 本协议则可由求苗随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似内容是本协议的一部分。</p>
            <h3>二、服务内容</h3>
            <p>2.1 求苗的具体内容由本站根据实际情况提供。&nbsp;</p>
            <p>2.2 本站仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)均应由用户自行负担。</p>
            <h3>三、用户帐号</h3>
            <p>3.1 经本站注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本站规定用户所应享有的一切会员权限；未经认证仅享有本站规定的部分会员权限。求苗有权对会员的权限设计进行变更。&nbsp;</p>
            <p>3.2用户注册求苗账号，制作、发布、传播信息内容的，应当使用真实身份信息及个人资料，不得以虚假、冒用的居民身份信息、企业注册信息、组织机构代码信息进行注册；若用户的个人资料有任何变动，用户应及时更新。如果使用虚假、冒用他人信息造成求苗或第三人损失的,由用户承担责任。</p>
            <p>3.3用户可自行编辑注册信息中的账号名称、头像、简介等，但应遵守“七条底线”（法律法规底线；社会主义制度底线；国家利益底线；公民合法权益底线；社会公共秩序底线；道德风尚底线；信息真实性底线）以及相关管理规定，不得含有违法和不良信息。</p>
            <p>3.4用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。</p>
            <h3>四、使用规则</h3>
            <p>4.1 遵守中华人民共和国相关法律法规，包括但不限于《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》、《最高人民法院关于审理涉及计算机网络著作权纠纷案件适用法律若干问题的解释(法释[2004]1号)》、《全国人大常委会关于维护互联网安全的决定》、《互联网电子公告服务管理规定》、《互联网新闻信息服务管理规定》、《互联网著作权行政保护办法》和《信息网络传播权保护条例》等有关计算机互联网规定和知识产权的法律和法规、实施办法。&nbsp;</p>
            <p>4.2 用户对其自行发表、上传或传送的内容负全部责任，所有用户不得在本站任何页面发布、转载、传送含有下列内容之一的信息，否则本站有权自行处理并不通知用户：</p>
            <div class="agree_box_list">
              <p>(1)违反宪法确定的基本原则的；&nbsp;</p>
              <p>(2)危害国家安全，泄漏国家机密，颠覆国家政权，破坏国家统一的；&nbsp;</p>
              <p>(3)损害国家荣誉和利益的；&nbsp;</p>
              <p>(4)煽动民族仇恨、民族歧视，破坏民族团结的；&nbsp;</p>
              <p>(5)破坏国家宗教政策，宣扬邪教和封建迷信的；&nbsp;</p>
              <p>(6)散布谣言，扰乱社会秩序，破坏社会稳定的；</p>
              <p>(7)散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；&nbsp;</p>
              <p>(8)侮辱或者诽谤他人，侵害他人合法权益的；&nbsp;</p>
              <p>(9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；&nbsp;</p>
              <p>(10)以非法民间组织名义活动的；</p>
              <p>(11)含有法律、行政法规禁止的其他内容的。</p>
            </div>
            <p>4.3 用户承诺对其发表或者上传于本站的所有信息(即属于《中华人民共和国著作权法》规定的作品，包括但不限于文字、图片、音乐、电影、表演和录音录像制品和电脑程序等)均享有完整的知识产权，或者已经得到相关权利人的合法授权；如用户违反本条规定造成本站被第三人索赔的，用户应全额补偿本站一切费用(包括但不限于各种赔偿费、诉讼代理费及为此支出的其它合理费用)；&nbsp;</p>
            <p>4.4 当第三方认为用户发表或者上传于本站的信息侵犯其权利，并根据《信息网络传播权保护条例》或者相关法律规定向本站发送权利通知书时，用户同意本站可以自行判断决定删除涉嫌侵权信息，除非用户提交书面证据材料排除侵权的可能性，本站将不会自动恢复上述删除的信息；</p>
            <div class="agree_box_list">
              <p>(1)不得为任何非法目的而使用网络服务系统；&nbsp;</p>
              <p>(2)遵守所有与网络服务有关的网络协议、规定和程序；</p>
              <p>(3)不得利用本站进行任何可能对互联网的正常运转造成不利影响的行为；&nbsp;</p>
              <p>(4)不得利用本站进行任何不利于本站的行为。</p>
            </div>
            <p>4.5 如用户在使用网络服务时违反上述任何规定，本站有权要求用户改正或直接采取一切必要的措施(包括但不限于删除用户张贴的内容、暂停或终止用户使用网络服务的权利)以减轻用户不当行为而造成的影响。</p>
            <h3>五、隐私保护</h3>
            <p>本协议所指的“隐私”包括《电信和互联网用户个人信息保护规定》第4条关于个人信息、《最高人民法院关于审理利用信息网络侵害人身权益民事纠纷案件适用法律若干问题的规定》第12条关于个人隐私、以及未来不时制定或修订的法律法规中明确规定的隐私应包括的内容。</p>
            <p>5.1 本站不对外公开或向第三方提供单个用户的注册资料及用户在使用网络服务时存储在本站的非公开内容，但下列情况除外：</p>
            <div class="agree_box_list">
              <p>（1）事先获得用户的明确授权；</p>
              <p>（2）为维护社会公共利益；</p>
              <p>（3）学校、科研机构等基于公共利益为学术研究或统计的目的，经自然人用户书面同意，且公开方式不足以识别特定自然人；</p>
              <p>（4）用户自行在网络上公开的信息或其他已合法公开的个人信息；</p>
              <p>（5）以合法渠道获取的个人信息；</p>
              <p>（6）用户侵害求苗或深圳华体星空体育文化有限公司合法权益，为维护前述合法权益且在必要范围内；</p>
              <p>（7）根据相关政府主管部门的要求；</p>
              <p>（8）根据相关法律法规或政策的要求；</p>
              <p>（9）其他必要情况。</p>
            </div>
            <p>5.2 本站可能会与第三方合作向用户提供相关的网络服务，在此情况下，如该第三方同意承担与本站同等的保护用户隐私的责任，则本站有权将用户的注册资料等提供给该第三方,用户不得提出异议或向本站要求索赔。</p>
            <p>5.3 在不透露单个用户隐私资料的前提下，本站有权对整个用户数据库进行分析并对用户数据库进行商业上的利用,用户不得提出异议或向本站要求索赔以及支付获利款等一切费用。</p>

            <h3>六、版权声明</h3>
            <p>6.1 本站提供的内容（包括但不限于网页、文字、图片、音频、视频、图表等）的知识产权归深圳华体星空体育文化有限公司所有，用户在使用本站服务中所产生的内容的知识产权归用户或相关权利人所有。</p>
            <p>.2 本站特有的标识、版面设计、编排方式等版权均属深圳华体星空体育文化享有，未经本站许可，不得任意复制或转载,否则将承担法律责任。&nbsp;</p>
            <p>.3 使用本站的任何内容均应注明“来源于求苗”及署上作者姓名，按法律规定需要支付稿酬的，应当通知本站及作者及支付稿酬，并独立承担一切法律责任,与本站无关。</p>
            <p>.4 本站享有所有作品用于其它用途的优先权，包括但不限于网站、电子杂志、平面出版等，但在使用前会通知作者，并按同行业的标准支付稿酬。</p>
            <p>.5 本站所有内容仅代表作者自己的立场和观点，与本站无关，由作者本人承担一切法律责任。&nbsp;</p>
            <p>.6 恶意转载本站内容的，本站保留将其诉诸法律的权利。</p>
            <h3>七、责任声明</h3>
            <p>7.1 用户明确同意其使用本站网络服务所存在的风险及一切后果将完全由用户本人承担，求苗对此不承担任何责任。&nbsp;</p>
            <p>7.2 本站无法保证网络服务一定能满足用户的要求，也不保证网络服务的及时性、安全性、准确性,用户不得以此为由要求本站索赔,本站不承担任何责任。&nbsp;</p>
            <p>7.3 本站不保证为方便用户而设置的外部链接的准确性和完整性，同时，对于该等外部链接指向的不由本站实际控制的任何网页上的内容，本站不承担任何责任。</p>
            <p>7.4 对于因不可抗力或本站不能控制的原因造成的网络服务中断或其它缺陷，本站不承担任何责任，但将尽力减少因此而给用户造成的损失和影响。</p>
            <p>7.5 对于本站向用户提供的下列产品或者服务的质量缺陷本身及其引发的任何损失，本站无需承担任何责任：</p>
            <div class="agree_box_list">
              <p>(1)本站向用户免费提供的各项网络服务；&nbsp;</p>
              <p>(2)本站向用户赠送的任何产品或者服务。</p>
            </div>
            <p>7.6 本站有权于任何时间暂时或永久修改或终止本服务(或其任何部分)，而无论其通知与否，本站对用户和任何第三人均无需承担任何责任。</p>
            <p>7.7 因用户原因造成本站损失的,用户不仅赔偿损失,而且赔偿因损失所产生的诉讼费、律师费、公证费、保全费等一切费用。</p>

            <h3>八、附则</h3>
            <p>8.1 本协议自用户注册成功时立即生效。</p>
            <p>8.2 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。&nbsp;</p>
            <p>8.3 如本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，本协议的其余条款仍应有效并且有约束力。</p>
            <p>8.4 本协议解释权及修订权归深圳华体星空体育文化有限公司所有。</p>
            <p>8.5 因本协议规定产生纠纷,向深圳华体星空体育文化有限公司所在地法院提起诉讼。</p>
            </div>
        </el-dialog>
    </el-form>
</template>
<script>
  import {mapGetters} from 'vuex'
  import indexApi from 'api'
  import validator from 'utils/validator'
  import ImgCode from '../../components/ImgCode'
  import SendVerifyCode from '../../components/SendVerifyCode'
  import {form} from 'utils/mixins'
  export default {
    mixins: [form],
    components: {
      ImgCode,
      SendVerifyCode
    },
    computed: {
      // 验证是否是手机号码或者邮箱地址
      usernameRight () {
        if (this.form.username.length) {
          return validator.pattern.email.test(this.form.username) || validator.pattern.mobile.test(this.form.username)
        }
      },
      ...mapGetters([
        'check_account'
      ])
    },
    data () {
      return {
        validator,
        loading: false,
        checkImg: false,
        dialogVisible: false,
        resultCode: '',
        seconds: 6,
        hover: false,
        rules: {
          imgCode: [
            {required: true, message: '请输入图片验证码'}
          ],
          verifyCode: [
            {required: true, message: '请输入验证码'}
          ]
        },
        sent: false,
        agree: true,
        form: {
          username: '',
          imgCode: '',
          codeKey: '',
          verifyCode: '',
          key: ''
        }
      }
    },
    methods: {
      submit () {
        if (!this.check_account && this.checkImg) {
          indexApi.checkRegister({
            account: this.form.username,
            smsCode: this.form.verifyCode,
            validateCode: this.form.imgCode,
            randomKey: this.form.codeKey
          }, { context: this }).then((res) => {
            this.resultCode = res.result
            this.$router.push({path: '/signup/password', query: {id: this.form.username}})
          }).catch((res) => {
            if (res.result === '2') {
              this.form.key = Math.random()
            }
          })
        }
      },
      // 验证手机号
      ckeckAccount () {
        if (this.usernameRight) {
          this.$store.dispatch('check_account', {account: this.form.username})
        }
      },
      // 验证图片验证码
      checkCode () {
        if (this.form.imgCode && this.form.imgCode.length === 4) {
          indexApi.checkImgCode({
            randomKey: this.form.codeKey,
            imgValidateCode: this.form.imgCode,
            type: 2
          }).then((res) => {
            this.checkImg = res.data
            if (this.checkImg === false) {
              this.form.key = Math.random()
            }
          }).catch((ERR) => {
            this.form.key = Math.random()
          })
        }
      }
    }
  }
</script>

<style lang="scss">
.signup_box{
  .el-dialog__header{
    padding:20px;
  }
  .el-dialog__body {
    height:500px;
    overflow-y: auto;
    padding:0;
  }
  .agree_box{
    padding:35px;
    background: #ebf0f5;
    h2.tc{
      font-size: 20px;
      font-weight:bold;
      text-align: center;
      margin: 15px 0;
      color:#333;
    }
    h3{
      font-size:16px;
      font-weight:bold;
      margin: 20px 0;
    }
    p{
      line-height: 2;
      margin-bottom: 3px;
    }
  }
}
</style>
